<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
</head>
<body>

<h1 style="text-align:center; ">邮件订阅服务页面</h1>
<form class="layui-form" action="">
    <div class="layui-form-item">
      <label class="layui-form-label" >这是您的邮箱吗</label>
      <div class="layui-input-block">
        <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="{{Auth::guard('admin')->user()->email}}" class="layui-input">
      </div>
    </div>
  <div class="div1">
    <p class="p">紧急状态触发</p>
    <div class="testswitch">
      <input class="testswitch-checkbox" id="onoffswitch" type="checkbox">
			<label class="testswitch-label" for="onoffswitch">
				<span class="testswitch-inner" data-on="ON" data-off="OFF"></span>
				<span class="testswitch-switch"></span>
			</label>
    </div>
  </div>
  <div class="div1">
    <p class="p">月统计报告</p>
    <div class="testswitch">
      <input class="testswitch-checkbox" id="onoffswitch1" type="checkbox">
			<label class="testswitch-label" for="onoffswitch1">
				<span class="testswitch-inner" data-on="ON" data-off="OFF"></span>
				<span class="testswitch-switch"></span>
			</label>
    </div>
  </div>
  <div class="div1">
    <p class="p">反馈与更新</p>
    <div class="testswitch">
      <input class="testswitch-checkbox" id="onoffswitch2" type="checkbox">
			<label class="testswitch-label" for="onoffswitch2">
				<span class="testswitch-inner" data-on="ON" data-off="OFF"></span>
				<span class="testswitch-switch"></span>
			</label>
    </div>
  </div>


</form>

<style>
  body{
    background-image: url(https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3089780457,38140037&fm=26&gp=0.jpg);
    background-repeat: no-repeat;
    background-size:800px 458px;


  }
  .div1{
    position: relative;
    margin-top: 20px;
  }
  .p{
    float: left;
    width: 100px;
    margin-left: 20px;
    margin-top: 20px;
  }
.testswitch {
  margin-top: 20px;
    position: relative;
    float: left;
    width: 90px;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select: none;
}

.testswitch-checkbox {
    display: none;
}

.testswitch-label {
    display: block;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid #999999;
    border-radius: 20px;
}

.testswitch-inner {
    display: block;
    width: 200%;
    margin-left: -100%;
    transition: margin 0.3s ease-in 0s;
}

.testswitch-inner::before, .testswitch-inner::after {
    display: block;
    float: right;
    width: 50%;
    height: 30px;
    padding: 0;
    line-height: 30px;
    font-size: 14px;
    color: white;
    font-family:
    Trebuchet, Arial, sans-serif;
    font-weight: bold;
    box-sizing: border-box;
}

.testswitch-inner::after {
    content: attr(data-on);
    padding-left: 10px;
    background-color: #00e500;
    color: #FFFFFF;
}

.testswitch-inner::before {
    content: attr(data-off);
    padding-right: 10px;
    background-color: #EEEEEE;
    color: #999999;
    text-align: right;
}

.testswitch-switch {
    position: absolute;
    display: block;
    width: 22px;
    height: 22px;
    margin: 4px;
    background: #FFFFFF;
    top: 0;
    bottom: 0;
    right: 56px;
    border: 2px solid #999999;
    border-radius: 20px;
    transition: all 0.3s ease-in 0s;
}

.testswitch-checkbox:checked + .testswitch-label .testswitch-inner {
    margin-left: 0;
}

.testswitch-checkbox:checked + .testswitch-label .testswitch-switch {
    right: 0px;
}


.layui-input  {
    width: 200px;
    height: 30px;
    padding-left: 10px;
}

.layui-form-label {
    float: left;
    display: block;
    padding: 9px 15px;
    width: 115px;
    font-weight: 500;
    line-height: 20px;
    text-align: right;
}
.layui-input-block {
    margin-left: 110px;
    min-height: 36px;
}
</style>

<script>
$(document).ready(function() {
	$("#onoffswitch").on('click', function(){
		clickSwitch()
	});

	var clickSwitch = function() {
		if ($("#onoffswitch").is(':checked')) {
			console.log("在ON的状态下");
		} else {
			console.log("在OFF的状态下");
		}
	};
});



    </script>
